<template>
	<view class="content">
		<view class="address-item" v-for="item in addressList" >
			<view class="address-name-phone">
				<text>{{item.name }}</text>
				<view style="width: 20rpx;display:inline-block"> </view>
				<text v-if="item.phone.length == 11">
					 {{item.phone.slice(0,3)}}&nbsp; {{item.phone.slice(3,7)}}&nbsp; {{item.phone.slice(7,11)}}
				</text>
				<text v-else> {{item.phone}}</text>
			</view>
			<view class="address-detail">{{item.address}}</view>
			<view  class="choose-icon" @click="chooseAddress(item)"></view>
			<uni-icons type="compose" size="30" class="edit-icon" @click="editAddress(item)"></uni-icons>
			<view v-if="item.isdefault == 1" class="address-default-icon">默认</view>
		</view>
		<view v-if="addressList.length == 0" class="empty-address" @click="addAddressButton">
			<image src="../../../static/empty_address.png" style="width: 50vw;" mode="aspectFit"></image>
			<view >地址为空，请添加地址</view>
		</view>
		<!-- 底部增加按钮 -->
		<view class="bottom-add-button">
			<button @click="addAddressButton" type="primary">+&nbsp;新增地址</button>
		</view>
		<!-- 新增、修改弹窗 -->
		<uni-popup ref="popup" background-color="#919191" :mask-click="false">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<view class="address-edit-box">
					<view class="address-edit-head">
						<view class="address-edit-title">{{checkItem.id==null? '新增':'编辑'}}收货地址</view>
						<uni-icons type="closeempty" size="30" @click="closeAddress"></uni-icons>

					</view>
					<uni-forms ref="valiForm"  style="padding-top: 15rpx;">
						<uni-forms-item class="cu-form-group"  label="姓名:"   name="name">
							<uni-easyinput     v-model="checkItem.name"   placeholder="请输入姓名" @input=""></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item class="cu-form-group"  label="电话:"   name="introduction">
							<uni-easyinput     v-model="checkItem.phone" type="number" placeholder="请输入电话" @input=""></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item class="cu-form-group"  label="地址:"  name="introduction">
							<uni-easyinput type="textarea"  v-model="checkItem.address" placeholder="片区/学院 + 楼栋 (楼层 + 收货房间)" />
						</uni-forms-item>
						<uni-forms-item v-if="this.addressList.length != 0" class="cu-form-group" label="设为默认地址:"  name="introduction"> 
							<uni-data-checkbox mode="button" selectedColor="red" v-model="checkItem.isdefault" :localdata="defalutData"></uni-data-checkbox>
						</uni-forms-item>
					</uni-forms>
					<view class="edit-button-box" >
						<button @click="addressDelete()"  class="cu-btn bg-red" v-if="checkItem.id != null">
							删除
							<uni-icons type="trash-filled" color="#fff" size="20" @click="closeAddress"></uni-icons>
							</button>
						<!-- <button @click="setDefault()" class="cu-btn bg-green" >设为默认</button> -->
						<button @click="saveAddress()" class="cu-btn bg-blue" >
							<view>保存</view>
							<uni-icons type="checkmarkempty" style="padding-top: 8 rpx;" color="#fff" size="20" @click="closeAddress"></uni-icons>
							</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { addAddress, getAddressByUserId, updataAddress, deleteAddress } from '@/api/address/index.js'
	export default {
	  data() {
	    return {
				addressList: [{
					name: 'q',
					phone: 'w',
					address: 'wsdf',
					isdefault: 0
				}],			
				centerDialogVisible: false, //地址修改弹出层
				type: 'center', //弹出层位置
				checkItem: {
					id: null,
					name: '',
					phone: '',
					address: '',
					isdefault: 0
				},
				defalutData: [{value:0,text:'非默认',disable: true},{value:1,text:'默认'}],
				chooseSign: false,
				
				
			}
	  },
		created() {
			this.getAddressByUserId()
		},
		onLoad(info){
			console.log(info.choose);
			if(info.choose == 1){
				this.chooseSign = true
				uni.showToast({
					icon:'none',
					title: '点击白块左部分，可选择对应地址'
				})
			}
		},
		methods:{
			//获取用户地址
			getAddressByUserId(){
				getAddressByUserId().then(res=>{
					console.log(res);
					console.log(res.rows);
					this.addressList = res.rows
				})
			},
			//修改用户地址信息
			editAddress(addressInfo){
				this.checkItem.id = addressInfo.id 
				this.checkItem.name = addressInfo.name 
				this.checkItem.phone = addressInfo.phone 
				this.checkItem.address = addressInfo.address 
				this.checkItem.isdefault = addressInfo.isdefault 
				// this.type = 'center'
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open()
			},
			// 关闭弹窗
			closeAddress(){
				this.$refs.popup.close()
			},
			SwitchC(){
				
			},
			//删除地址
			addressDelete(){
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定删除该地址？',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');							
							deleteAddress(that.checkItem.id).then(res=>{
								if(res.code == 200){
									uni.showToast({
										title: '删除成功',
										duration: 1000
									});
									that.$refs.popup.close()
									that.getAddressByUserId()
								}else{
									uni.showToast({
										title: '删除失败',
										duration: 1000
									});
								}				
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//设为默认
			setDefault(){
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定设该地址为默认？',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');							
							setDefaultAddress(that.checkItem).then(res=>{
								if(res.code == 200){
									uni.showToast({
										title: '设置成功',
										duration: 1000
									});
									that.$refs.popup.close()
									that.getAddressByUserId()
								}else{
									uni.showToast({
										title: '设置失败',
										duration: 1000
									});
								}				
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//保存地址信息
			saveAddress(){
				let that = this
				console.log(this.checkItem);
				if(this.checkItem.name.length < 2||this.checkItem.name.length > 10){
					return uni.showToast({
						title: '名字4~20字符',
						icon:'none',
						duration: 1000
					});
				}
				if(this.checkItem.phone.length < 11 || this.checkItem.phone.length > 30){
					return uni.showToast({
						title: '电话长度错误',
						icon:'none',
						duration: 1000
					});
				}
				if(this.checkItem.address.length < 4){
					return uni.showToast({
						title: '地址少于8字符',
						icon:'none',
						duration: 1000
					});
				} 
				if(null == this.checkItem.id){
					if(this.addressList.length == 0){
						this.checkItem.isdefault = 1
					}
					addAddress(this.checkItem).then(res=>{
						console.log(res);
						if(res.code == 200){
							uni.showToast({
								title: '新增成功',
								duration: 1000
							});
							that.$refs.popup.close()
							that.getAddressByUserId()
						}
					})
				}else{						
					updataAddress(this.checkItem).then(res=>{
						console.log(res);
						if(res.code == 200){
							uni.showToast({
								title: '保存成功',
								duration: 1000
							});
							that.$refs.popup.close()
							that.getAddressByUserId()
						}
					})
				}
			},
			//新增地址
			addAddressButton(){				
				this.checkItem.id = null
				this.checkItem.name = '' 
				this.checkItem.phone = '' 
				this.checkItem.address = '' 
				this.checkItem.isdefault = 0
				this.$refs.popup.open()		
			},
			//选中地址
			chooseAddress(item){
				this.$store.commit('SET_ADDRESS',item)
				uni.navigateBack({delta: 1})
				// uni.redirectTo({url: '/pages/print/checkout/index?name='+item.name+'&phone='+item.phone+'&address='+item.address})
				console.log('ddd');
			}
		}
	}
</script>

<style>
	.content {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}
	
	/* 地址个体 */
	.address-item{
		display: flex;
		flex-direction: column;
		position: relative;
		width: 94vw;
		margin: 30rpx;
		margin-bottom: 0;
		padding: 30rpx;
		background-color: white;
		border-radius: 10rpx;
	}
	.choose-icon{
		position: absolute;
		left: 0rpx; 
		top: 0rpx; 
		width: 70%;
		height: 100%;
		/* background-color: aqua; */
	}
	.edit-icon{
		position: absolute;
		right: 10rpx; 
	}
	.address-name-phone{
		font-size: larger;
	}
	.address-detail{
		margin-top: 10rpx;
	}
	.address-default-icon{
		position: absolute;
		/* right: 15rpx; */
		/* bottom: 15rpx; */
		right: 0rpx;
		bottom: 0rpx;
		padding: 5rpx;		
		padding-left: 10rpx;		
		font-size: smaller;
		font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
		background-color: aqua;
		border-radius: 10rpx 0 0 0;
	}
	
	/* 修改框 */
	.address-edit-box{
		padding: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
		background-color: white;
	}
	.address-edit-head{ 
			width: 80vw;
			display: flex;
			justify-content: space-between;
			padding: 0 10rpx;
			/* background-color: #f3f3f3; */
			border-bottom: 1rpx solid #f3f3f3;
	}
	.address-edit-title{
		line-height: 60rpx;
		font-size: larger;
	}
	.edit-button-box{
		padding: 20rpx;
		display: flex;
		justify-content: space-around;
	}
	.edit-button-box button{
		width: 30vw;
	}
	
	/*  */
	.cu-form-group{
		margin: 20rpx;
		width: 70vw;
		border: white;
	}
	
	/* 底部新增 */
	.bottom-add-button{
		position: fixed;		
		width: 80vw;
		bottom: 10rpx;
	}
	
	/* 空地址 */
	.empty-address{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.empty-address view{
		margin-top: -50rpx;
	}
</style>